<!doctype html>
<html>
<head>
	<title>CSS3 calc() function</title>
	<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<div class="wrapper cf">
	<div class="col one">A</div>
	<div class="col two">B</div>
	<div class="col three">C</div>

	<!-- codes -->
<div class="cf">
<h4>Codes</h4>

<pre class="pre">
.wrapper {
	width: 700px;
	margin: 50px auto 0;
	height: 500px;
}
.col {
	width: -webkit-calc(100% / 3);
	width: -moz-calc(100% / 3);
	width: calc(100% / 3);

	float: left;
	height: 100%;
	text-align: center;
	font-size: 50px;
	color: #fff;
	line-height: 300%;
	font-weight: bold;
}
.col.one {
	background-color: #3b3140;
}
.col.two {
	background-color: #bfb8a3;
}
.col.three {
	background-color: #f2e0c9;
}
</pre>
</div>
</div>
</body>
</html>